<template>
    <div>
        <div id="searchbar" class="all" style="padding: 5px;width: 100%;background: #ffffff2e;">
            <a-row>
                <a-col :span="2">
                  
              </a-col>
              <a-col :span="3" style="padding:3px;">
                  <a-tag :color="card1tagColor">{{ card1desc }}</a-tag>
                
              </a-col>
               <a-col :span="3">
                  
               </a-col>
                <a-col :span="8">
                <div style="padding: px;text-align: center;line-height: 40px;font-size: 18px;color: #ffff;font-weight: 600;vertical-align: middle;">
                  LandSet数据
                   </div>
               </a-col>
                <a-col :span="8">
                    <a-input-search  enter-button placeholder="输入年度查询" size="large" style="width: 380px" @search="onQySearch" />
                </a-col>
            </a-row>
     
            </div>
        <div id="map" :style="{ height: Height + 'px' }" style="position: relative;border: 1px solid #9999ff;box-shadow: 0 0px 5px 0 rgb(6 13 245) inset;}">

             <div id="select-left-bar">
                          <a-card>
                <span slot="title">
                  <a-icon type="table"/>
                  <span style="margin-left:10px;">LandSet影像基本信息</span>
                </span>
                <a-table
                      :dataSource="leftTableData"
                      :columns="columns"
                      rowKey="kid"
                      :pagination="pagination"
                      size="middle"
                      :customRow="clickRow"
                    >
                    </a-table>
              </a-card>
        </div>
        
        </div>
          <CostomProgress
      :title="c_title"
      :modal2Visible="c_visable"
      :percent="c_percent"
    ></CostomProgress>
    </div>
</template>
<script>
import * as mapOper from '../../scripts/mapOper.js';
import config from '../../config/config';
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
import CostomProgress from './CostomProgress.vue';

import Utils from '../../scripts/Utils';
export default {
  name:'R30101',
  data() {
    function showTotalFn(total) {
      return `总数：${total} `;
    }
    return {
      //自定义进度条数据
      c_title: '',
      c_percent: 0,
      c_visable: false,
      map:null,
      bodyStyle:{padding: '4px'},
      Height: 500,
      lengedData:[],
      visible:false,
      loaclQyData:[],
      leftTableData: [],
      mineSource:[],
      selectSource:[],
      mineLocalData:[],
      mouseEnterDelay: 0.6,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      //传递到弹窗组件中的数据
      popupData: {},
      columns: [
        
        {
          title: '名称',
          dataIndex: 'mc',
          key: 'mc',
          align: 'center'
        },
        {
          title: '数据时间',
          dataIndex: 'sjsj',
          key: 'sjsj',
          align: 'center'
        }
      ],
      pagination: {
        size: 'small',
        defaultCurrent: 1,
        defaultPageSize: 8,
        pageSize: 8,
        showTotal: showTotalFn
      },
      card1color: '#FAAD14',
      card1avatar: '6个',
      card1tagColor: 'orange',
      card1desc: '数据总量：591Mb',

      card2color: '#52C41A',
      card2avatar: '6个',
      card2tagColor: 'green',
      card2desc: '排放口总数',

      card3color: '#1890FF',
      card3avatar: '条',
      card3tagColor: '#f50',
      card3desc: '累计清洗数据473449条',
    };
  },
  components: {
    CostomProgress
  },
  mounted: function() {
    let height = window.innerHeight - 154;
    this.Height = height;
    this.$nextTick(() => {
      this.map = mapOper.initBlankMap('map');
      this.map.getView().setZoom(4);
    });
    //this.initJcdData();
    this.initLandSetBasicInfo();
    
  },
  methods:{
    onQySearch:function(){
          
    },
    onClose(){
      this.visible=false;
    },
    initLandSetBasicInfo(){
      
      let that=this;
      let param = {
        this: that,
        url: config.webapiUrl + '/image/getImageList?source=LandSet&type=02',
        successFunc: response => {
          var tempdata=[];
          //console.log(response.data.data);
          that.loaclQyData=response.data.data;
          _.forEach(response.data.data, function(value) {
            var date1 = new Date(value.datatime);
            let sjsj = Utils.dateFormat(date1, 'yyyy-MM-dd');
              
            tempdata.push({kid: value.id,mc:value.name,sjsj:sjsj});
          });
          that.leftTableData=tempdata;
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpGet(param);
    },
    
    clickRow(record) {
      return {
        on: {
          click: () => {
            //console.log(record, index);
            let mc = record.mc;
            console.log(mc);
            let mapfileName='wuhai-lsraster';
            //let currtext = '热红外';
      
            let params = {
              map: this.map,
              mapfile:mapfileName,
              layerName:  mc,
              coordinate:[36401859.825, 4371259.970]
            };
            mapOper.loadRasterLayer(params);
          }
        }
      };
    },
    
  }
};
</script>
<style>
.content .ant-input{
background-color: rgba(0, 0, 0, 0.07) !important;
}

.content .ant-input:focus {
    border-color: #d9d9d9;
    border-right-width: 1px !important;
    outline: 0;
    color:#fff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.content .ant-tag {
line-height: 30px;
font-size: 14px;
}
.content .ant-avatar {
    font-size: 18px;
}


@-webkit-keyframes warn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes warn {
  0% {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes warn {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.area-box .dot {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #f90;
  opacity: 1;
  filter: alpha(opacity=100);
}
.area-box .pulse {
  position: absolute;
  top: -28px;
  left: -28px;
  height: 66px;
  width: 66px;
  border: 2px solid #f90;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  -webkit-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  -moz-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  box-shadow: 0 0 4px #f90, 0 0 10px #f90 inset;
  opacity: 0.12;
  filter: alpha(opacity=0);
  -webkit-animation: warn 2s ease-out both;
  -moz-animation: warn 2s ease-out both;
  -o-animation: warn 2s ease-out both;
  animation: warn 2s ease-out both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background: 0 0;
}
.area-box .delay-1 {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
.area-box .delay-2 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.area-box .delay-3 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.area-box .delay-4 {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.area-box .delay-5 {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.area-box .delay-6 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.area-box .delay-7 {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  -o-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.area-box .delay-8 {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.area-box .delay-9 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.area-box .delay-10 {
  -webkit-animation-delay: -1.2s;
  -moz-animation-delay: -1.2s;
  -o-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.area-box .delay-11 {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#select-left-bar {
  width: 360px;
  position: absolute;
  bottom:5px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.65);
}

</style>